<template>
  <div class="app-container">
    <!-- <el-button type="primary" v-preventReClick="3000">测试重复点击</el-button> -->
    <div class="top-search">
      <searchForm
        ref="searchForm"
        :search-data="formInline"
        :search-form="searchForm"
        :search-handle="searchHandle"
      >
      </searchForm>
    </div>
    <div class="table-content kfScreenFull">
      <baseTable
        :table="tableProperty"
        @action="handleButton"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></baseTable>
    </div>
    <!-- 弹框 -->
    <DialogContent
      v-if="dialogVisible"
      :visible="dialogVisible"
      @close="dialogVisible = false"
      @Save="handleSave"
    >
      <slot>
        我是弹框内容哈哈哈哈哈
      </slot>
    </DialogContent>
  </div>
</template>

<script>
import searchForm from "@/components/SearchForm";
import baseTable from "@/components/Table/baseTable";
import DialogContent from "@/components/Dialog";
import { getUserList } from "@/api/user";
export default {
  name: "Dashboard",
  components: { searchForm, baseTable, DialogContent },
  data() {
    return {
      formInline: { name: "", name1: "", State: "" },
      searchForm: [
        {
          type: "Select",
          prop: "State",
          placeholder: "请选择",
          options: [
            { value: "0", label: "测试" },
            { value: "1", label: "demo" }
          ],
          change: row => {}
        },
        {
          type: "remoteSelect",
          prop: "name1",
          options: [],
          loading: false,
          remoteMethod: val => {
            if (val !== "") {
              this.loading = true;
              setTimeout(() => {
                getUserList().then(res => {
                  if (res.data.success) {
                    this.loading = false;
                    const { list } = res.data.data;
                    const result = list.map(item => {
                      return { label: item.name, value: item.name };
                    });
                    this.searchForm[1].options = result;
                  }
                });
              }, 200);
            }
          },
          change: row => {}
        },
        {
          type: "Input",
          prop: "name",
          placeholder: "请输入进行搜索"
        }
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "primary",
          handle: () => {}
        }
      ],
      tableProperty: {
        tableData: [],
        tableColumn: [
          {
            label: "名称",
            prop: "ncDepartment"
          },
          {
            label: "姓名",
            prop: "name"
          },
          {
            label: "性别",
            prop: "sex"
          },
          {
            label: "密码",
            prop: "password"
          },
          {
            label: "电话",
            prop: "phome"
          },
          {
            label: "邮箱",
            prop: "email"
          }
        ],
        tableOption: {
          label: "操作",
          buttons: [
            { name: "编辑", methods: "edit" },
            { name: "删除", methods: "delete", style: { color: "red" } }
          ]
        },
        Pagination: {
          currentPage: 1,
          total: 100,
          pageSize: 10
        }
      },
      dialogVisible: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    /**编辑或删除 */
    handleButton({ row, methods }) {
      if (methods == "edit") {
        this.dialogVisible = true;
      }
    },
    /**分页 */
    handleSizeChange(val) {
      console.log(val, "pageSize");
      this.tableProperty.Pagination.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(val, "currentPage");
      this.tableProperty.Pagination.currentPage = val;
    },
    /**弹框确定 */
    handleSave() {}
  }
};
</script>

<style lang="scss"></style>
